<template>
  <view class="container">
    <view class="logo-container">
      <image class="logo" src="/static/jiandujilogo.png" mode="aspectFit"></image>
    </view>
    
    <view class="header">
      <text class="title">监督鸡</text>
      <text class="subtitle">愿每个孩子养成好习惯</text>
    </view>
    
    <view class="form-container">
      <view class="form-group">
        <input 
          class="input" 
          type="text" 
          placeholder="请输入用户名或邮箱" 
          v-model="loginForm.username"
        />
      </view>
      
      <view class="form-group password-group">
        <input 
          class="input password-input" 
          :type="showPassword ? 'text' : 'password'" 
          placeholder="请输入密码" 
          v-model="loginForm.password"
        />
      </view>
      
      <view class="remember-me">
        <checkbox class="checkbox" :checked="rememberPassword" @change="rememberPassword = $event.target.checked"></checkbox>
        <text class="remember-text">记住密码</text>
      </view>
      
      <Button 
        class="login-btn" 
        type="primary" 
        text="登录" 
        :loading="loading"
        @click="handleLogin"
      />
      
      <view class="form-footer">
        <text class="link" @click="goToForgotPassword">忘记密码？</text>
        <text class="link" @click="goToRegister">注册新账号</text>
      </view>
      
      <view class="divider">
        <text class="divider-text">或</text>
      </view>
      
      <view class="wechat-login" @click="handleWechatLogin">
        <image class="wechat-icon" src="/static/wechat-icon.png" mode="aspectFit"></image>
        <text class="wechat-text">微信登录</text>
      </view>
    </view>
  </view>
</template>

<script>
import { setStorage, getStorage } from '../../utils/storage.js';
import { services } from '../../api/index.js';
const userAPI = services.user;

export default {
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      loading: false,
      showPassword: false,
      rememberPassword: false
    };
  },
  created() {
    // 从本地存储获取记住的用户名
    const rememberedUsername = getStorage('rememberedUsername');
    if (rememberedUsername) {
      this.loginForm.username = rememberedUsername;
      this.rememberPassword = true;
    }
  },
  
  methods: {
    togglePasswordVisibility() {
      this.showPassword = !this.showPassword;
    },
    
    async handleLogin() {
      if (!this.loginForm.username) {
        uni.showToast({
          title: '请输入用户名或邮箱',
          icon: 'none'
        });
        return;
      }
      
      if (!this.loginForm.password) {
        uni.showToast({
          title: '请输入密码',
          icon: 'none'
        });
        return;
      }
      
      try {
        this.loading = true;
        
        // 调用真实的登录API
        const response = await userAPI.handleLoginProcess(this.loginForm, this.rememberPassword);
        
        uni.showToast({
          title: '登录成功',
          icon: 'success'
        });
        
        // 按角色分流到对应首页
        // 登录后统一进入系统 TabBar 首页，页面内部根据角色渲染
        setTimeout(() => {
          uni.switchTab({ url: '/pages/home/main-account' });
        }, 600);
      } catch (error) {
        console.error('登录失败:', error);
        uni.showToast({
          title: error?.data?.message || '登录失败，请稍后重试',
          icon: 'none'
        });
      } finally {
        this.loading = false;
      }
    },
    
    async handleWechatLogin() {
      try {
        this.loading = true;
        
        // 调用微信登录API
        const response = await userAPI.handleWechatLogin();
        
        uni.showToast({
          title: '微信登录成功',
          icon: 'success'
        });
        
        // 按角色分流到对应首页（微信登录流程内 userInfo 已写入）
        setTimeout(() => {
          uni.switchTab({ url: '/pages/home/main-account' });
        }, 600);
      } catch (error) {
        console.error('微信登录失败:', error);
        uni.showToast({
          title: error?.data?.message || '微信登录失败，请稍后重试',
          icon: 'none'
        });
      } finally {
        this.loading = false;
      }
    },
    
    goToRegister() {
      uni.navigateTo({
        url: '/pages/auth/register'
      });
    },
    
    goToForgotPassword() {
      uni.navigateTo({
        url: '/pages/auth/forgot-password'
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: $spacing-xl;
  background-color: $background-color;
  min-height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 100rpx;
}

.logo-container {
  margin-bottom: 40rpx;
}

.logo {
  width: 180rpx;
  height: 180rpx;
  border-radius: 50%;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48rpx;
  color: $text-secondary;
}

.header {
  text-align: center;
  margin-bottom: 60rpx;
}

.title {
  font-size: 48rpx;
  font-weight: bold;
  color: $text-primary;
  display: block;
  margin-bottom: 16rpx;
}

.subtitle {
  font-size: 28rpx;
  color: $text-secondary;
}

.form-container {
  width: 100%;
  max-width: 600rpx;
}

.form-group {
  margin-bottom: 32rpx;
}


.input {
  width: 100%;
  height: 96rpx;
  padding: 0 $spacing-base;
  border: 1rpx solid $text-tertiary;
  border-radius: 16rpx;
  font-size: $font-size-base;
  box-sizing: border-box;
  background-color: #ffffff;
}

.password-input {
  padding-right: 80rpx;
}

.eye-icon {
  position: absolute;
  right: 32rpx;
  top: 50%;
  transform: translateY(-50%);
  font-size: 40rpx;
}

.remember-me {
  display: flex;
  align-items: center;
  margin-bottom: 40rpx;
}

.checkbox {
  transform: scale(0.8);
  margin-right: 12rpx;
}

.remember-text {
  font-size: 28rpx;
  color: $text-secondary;
}

.login-btn {
  height: 46rpx;
  line-height: 46rpx;
  border-radius: 16rpx;
  font-size: 32rpx;
  margin-bottom: 32rpx;
}

.form-footer {
  display: flex;
  justify-content: space-between;
  margin-bottom: 48rpx;
}

.link {
  color: $primary-color;
  font-size: 28rpx;
  
  &:active {
    opacity: 0.8;
  }
}

.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32rpx;
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1rpx;
  background-color: $text-tertiary;
  opacity: 0.3;
}

.divider-text {
  padding: 0 24rpx;
  font-size: 24rpx;
  color: $text-tertiary;
}

.wechat-login {
  width: 100%;
  height: 96rpx;
  border: 1rpx solid $text-tertiary;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
}

.wechat-icon {
  width: 48rpx;
  height: 48rpx;
  margin-right: 16rpx;
}

.wechat-text {
  font-size: 32rpx;
  color: $text-primary;
}
</style>